<template>
  <div class="tip">
    <h4>菜单信息</h4>
  </div>

  <el-divider />

  <div style="margin-bottom: 30px"></div>
  <cv-form :config="form" :data="formData" @reset-form="resetForm"> </cv-form>
</template>
<script setup lang="ts">
import type { FormConfig } from '@/packages/components'
import { addReq, queryReq, pageQueryReq, updateReq } from '@/utils/http/code'
import { cloneFnJSON, useVModels } from '@vueuse/core'
import {
  ShopAdminPermission,
  MenuDetailAndButtonPermission,
  getMenuDetailAndButtonPermission,
} from '@/api/system/system-menu'

import { $bus } from '@/utils/common/mitt'

const emit = defineEmits(['update:show', 'refreshTable'])
const props = defineProps({
  /**
   * 是否显示弹窗
   */
  show: {
    type: Boolean,
    default: false,
  },
})

const { show } = useVModels(props)

const resetForm = async () => {
  formData.value = cloneFnJSON(formData1.value)
}

const formData = ref<ShopAdminPermission>()
const formData1 = ref<ShopAdminPermission>()

$bus.on('initMenuDetailAndButtonPermission', async (e) => {
  const res = e as MenuDetailAndButtonPermission
  formData.value = res.shopAdminPermission
  formData1.value = cloneFnJSON(res.shopAdminPermission)
})

/**
 *数据添加
 */
const form = reactive<FormConfig<ShopAdminPermission>>({
  items: [
    {
      type: 'input',
      prop: 'title',
      label: '菜单名称',
      rules: {
        required: true,
        type: 'string',
        max: 10,
      },
    },

    {
      type: 'input',
      prop: 'path',
      label: '路径',
      rules: {
        required: true,
        type: 'string',
      },
    },

    {
      type: 'input',
      prop: 'component',
      label: '组件',
      rules: {
        required: true,
        type: 'string',
      },
      showCallback: (row) => {
        return row.type === 2
      },
    },

    {
      type: 'input-number',
      prop: 'sort',
      label: '排序',
    },
    {
      type: 'switch',
      prop: 'state',
      label: '状态',
      rules: { required: false },
    },

    {
      type: 'switch',
      prop: 'isShow',
      label: '是否显示',
      rules: { required: false },
    },
  ],
})
</script>

<style lang="scss" scoped>
.tip {
  margin-bottom: 10px;
}
</style>
